<template>
	<view class="project">
		<view class="item" :class="rotate === index ? 'itemCur' : ''" v-for="(item, index) in Project">
			<image src="/static/images/wbz/add.png" :class="rotate === index ? 'rotate' : ''" class="switch" @click="rotateChange(index)" mode=""></image>
			<view class="date">第{{ numberToChinese(item.day) }}天 {{ timeStrGetTime(item.datetime) }}</view>
			<view class="title">
				{{ item.title }}
			</view>
			<view class="goods">
				<image class="goodsImg" v-if="item.image != ''" :src="item.image" mode="aspectFill"></image>
				<view class="goodsTxt clamp">
					{{ item.description }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { numberToChinese, timeStrGetTime } from '@/utils/utils.js';
	export default {
		name: 'project',
		props: {
			Project: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				rotate: false,
			};
		},
		methods: {
			numberToChinese: numberToChinese,
			timeStrGetTime: timeStrGetTime,
			rotateChange(index) {
				if (index === this.rotate) {
					this.rotate = false;
					return;
				}
				this.rotate = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.project {
		overflow: hidden;
		.item {
			position: relative;
			width: 694rpx;
			height: 124rpx;
			background: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 0 auto 10rpx;
			transition: height 0.5s linear;
			.date {
				margin-top: 30rpx;
				margin-left: 30rpx;
				color: #999999;
				font-size: $uni-font-size-10;
			}
			.title {
				margin-left: 30rpx;
				font-size: $uni-font-size-12;
				font-weight: bold;
				margin-top: 20rpx;
			}
			.switch {
				position: absolute;
				width: 20rpx;
				height: 20rpx;
				right: 30rpx;
				top: 30rpx;
				transition: transform 0.5s linear;
			}
			.rotate {
				transform: rotate(45deg);
			}
			.goods {
				margin-top: 20rpx;
				overflow: hidden;
				display: flex;
				.goodsImg {
					margin-left: 30rpx;
					width: 220rpx;
					height: 150rpx;
				}
				.goodsTxt {
					width: 400rpx;
					margin-left: 20rpx;
					-webkit-line-clamp: 5;
					font-size: 20rpx;
					color: #000000;
					line-height: 34rpx;
				}
			}
		}
		.itemCur {
			height: 294rpx;
		}
	}
</style>
